import homeLogo from "@/assets/image/homeLogo.png";
import useTranslations from "@/hooks/useTranslations";
import useStore from "@/store/configStore";
import { MenuOutlined, SmileOutlined, UserOutlined } from "@ant-design/icons";
import { Avatar, Badge, Button, Drawer, Dropdown, Space } from "antd";
import { useEffect, useState } from "react";
import { useMediaQuery } from "react-responsive";
import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";
import styled from "styled-components";
import { Link, useLocation } from "umi";
import "./index.less";
import SwitchLanguage from "./SwitchLanguage";

const LoginButton = styled(Button)`
  width: 120px;
  height: 48px;
  border: none;
  background-color: transparent;
  border-radius: 32px;
  background-color: #d1b379;
  padding: 12px 38px 12px 38px;
  color: #fff;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  &:hover {
    background-color: #f0f0f0 !important;
    border-color: #555 !important;
    color: #555 !important;
    cursor: pointer;
  }
`;

export default function Headers() {
  const $t = useTranslations();
  const { isLoggedIn, login, logout } = useStore();
  const { pathname } = useLocation();
  const isHomePage = pathname === "/";
  let navbarColor = isHomePage ? "#fff" : "#202020";

  // 滚动状态
  const [isScrolled, setIsScrolled] = useState(false);
  if (isScrolled) {
    navbarColor = "#202020";
  }
  console.log(isScrolled, "isScrolled");
  // 响应式检测
  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });

  // Drawer 状态
  const [drawerVisible, setDrawerVisible] = useState(false);

  const items = [
    { key: "1", label: <Link to="/profile">个人中心</Link> },
    {
      key: "2",
      label: <Link to="/settings">设置</Link>,
      icon: <SmileOutlined />,
      disabled: true,
    },
    { key: "4", danger: true, label: <a onClick={logout}>退出登录</a> },
  ];

  const toggleDrawer = () => {
    setDrawerVisible(!drawerVisible);
  };
  // 监听滚动事件
  useEffect(() => {
    console.log(11111);
    const handleScroll = () => {
      if (window.scrollY > 100) {
        console.log(22222);
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <>
      <div className={`headerContainer ${isScrolled ? "scrolled" : ""}`}>
        <div className="headerContent">
          <Link className="no-underline" to="/">
            <div className="logo">
              <Space className="space-container" size={"small"}>
                <div className="home-logo">
                  <img src={homeLogo} alt="homeLogo" />
                </div>
                <div
                  className="line"
                  style={{ backgroundColor: navbarColor }}
                ></div>
                <div className="logo-text" style={{ color: navbarColor }}>
                  Airport Community Car Park
                </div>
              </Space>
            </div>
          </Link>

          {isMobile ? (
            // 移动端显示菜单图标
            <MenuOutlined
              className="menu-icon"
              style={{
                fontSize: "14px",
                color: navbarColor,
                cursor: "pointer",
              }}
              onClick={toggleDrawer}
            />
          ) : (
            // PC端显示完整导航
            <div className="navs" style={{ color: navbarColor }}>
              <SimpleBar style={{ maxHeight: "100vh" }}>
                <ul>
                  <li>
                    <Link to="/">{$t("Home")}</Link>
                  </li>
                  <li>
                    <Link to="/carpark-booking/home">
                      {$t("Car Park Booking")}
                    </Link>
                  </li>
                  <li>
                    <Link to="/about">{$t("About Us")}</Link>
                  </li>
                  <li>
                    <Link to="/contact">{$t("Contact Us")}</Link>
                  </li>
                  <li>
                    <SwitchLanguage textColor={navbarColor} />
                  </li>
                  <li>
                    {isLoggedIn ? (
                      <Dropdown menu={{ items }} trigger={["hover"]}>
                        <Badge count={0}>
                          <Avatar shape="square" icon={<UserOutlined />} />
                        </Badge>
                      </Dropdown>
                    ) : (
                      <LoginButton
                        type="default"
                        size={"middle"}
                        onClick={() => login("User")}
                      >
                        Login
                      </LoginButton>
                    )}
                  </li>
                </ul>
              </SimpleBar>
            </div>
          )}
        </div>
      </div>

      {/* 移动端 Drawer */}
      <Drawer
        width={"80%"}
        className="drawer-container"
        closeIcon={false}
        title={
          <div className="drawer-header">
            <div className="drawer-title">
              {" "}
              <Link className="no-underline" to="/">
                <div className="logo">
                  <Space className="space-container" size={"small"}>
                    <div className="home-logo">
                      <img
                        style={{ height: "16px" }}
                        src={homeLogo}
                        alt="homeLogo"
                      />
                    </div>
                    <div
                      className="line"
                      style={{ backgroundColor: navbarColor }}
                    ></div>
                    <div
                      className="logo-text"
                      style={{ color: "#202020", fontSize: "16px" }}
                    >
                      Car Park
                    </div>
                  </Space>
                </div>
              </Link>
            </div>
            <SwitchLanguage textColor={navbarColor} />
            {!isLoggedIn && (
              <LoginButton
                type="default"
                size={"middle"}
                onClick={() => login("User")}
                className="drawer-login-button"
              >
                Login
              </LoginButton>
            )}
            {isLoggedIn && (
              <Dropdown menu={{ items }} trigger={["hover"]}>
                <Badge count={0}>
                  <Avatar shape="square" icon={<UserOutlined />} />
                </Badge>
              </Dropdown>
            )}
          </div>
        }
        placement="right"
        onClose={toggleDrawer}
        visible={drawerVisible}
        bodyStyle={{ padding: 0 }}
      >
        <SimpleBar style={{ maxHeight: "100vh" }}>
          <ul className="mobile-navs">
            <li>
              <Link to="/" onClick={toggleDrawer}>
                {$t("Home")}
              </Link>
            </li>
            <li>
              <Link to="/carpark-booking/home" onClick={toggleDrawer}>
                {$t("Car Park Booking")}
              </Link>
            </li>
            <li>
              <Link to="/about" onClick={toggleDrawer}>
                {$t("About Us")}
              </Link>
            </li>
            <li>
              <Link to="/contact" onClick={toggleDrawer}>
                {$t("Contact Us")}
              </Link>
            </li>
          </ul>
        </SimpleBar>
      </Drawer>
    </>
  );
}
